<template>
    <div class="search-type flex-center">
        <div v-for="(item, index) in list" :key="index" :class="['type', 'flex-center-horizontal', `type${index+1}`]" @click="clickItem(item)">
            <img src="../../assets/type-icon.png" alt="" srcset="">
            <p style="color:red">{{ item.title }}</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    title: '预交记录',
                    bg: '/img/type1-bg.png',
                    path: '/content/advancePaymentRecord'
                },
                {
                    title: '清单记录',
                    bg: '/img/type2-bg.png',
                    path: '/content/listRecord'
                }
            ]
        }
    },
    methods: {
        clickItem(item) {
            this.$router.push(`/content/hospitalNum?path=${item.path}`)
        }
    }
}
</script>

<style lang="scss" scoped>
.search-type {
    height: 100%;
    box-sizing: border-box;
    .type {
        width: 265px;
        height: 171px;
        box-shadow: 0px 0px 14px 0px rgba(56,141,255,0.2000);
        border-radius: 0px 14px 14px 14px;
        margin: 0 29px;
        object-fit: cover;
        background-size: 100% 100%;
        justify-content: center;
        color: #fff;
        font-size: 37px;
        border-radius: 18px;
        img {
            width: 78px;
        }
    }
    // .type1 {
    //     background: url('/img/type1-bg.png') no-repeat;
        
    // }
    // .type2 {
    //     background: url('/img/type2-bg.png') no-repeat;
    // }
}
</style>

